<template>
  <div id="userInfoView">
    <div class="g-container">
      <a-row :gutter="18">
        <a-col :span="4">
          <div style="background: white; width: 100%;">
            <div style="padding: 10px">
              <img :src="userInfo.avatar" style="width: 100%; margin: 0 auto;"/>
            </div>
            <a-divider :margin="5"/>
            <div style="padding: 20px 10px; text-align: center; font-weight: bold; font-size: 18px">
              {{ userInfo.nickName }}
            </div>
            <a-divider :margin="5"/>
            <div style="padding: 10px">
              <a-row :gutter="18">
                <a-col :span="8">
                  <div style="text-align: center; display: flex; flex-direction: column;">
                    <span style="font-size: 12px; color: grey; margin-bottom: 5px">关注数</span><span>{{ 1 }}</span>
                  </div>
                </a-col>
                <a-col :span="8">
                  <div style="text-align: center; display: flex; flex-direction: column;">
                    <span style="font-size: 12px; color: grey; margin-bottom: 5px">粉丝数</span><span>{{ 1 }}</span>
                  </div>
                </a-col>
                <a-col :span="8">
                  <div style="text-align: center; display: flex; flex-direction: column;">
                    <span style="font-size: 12px; color: grey; margin-bottom: 5px">解题数</span><span>{{ 1 }}</span>
                  </div>
                </a-col>
              </a-row>
            </div>
          </div>
        </a-col>
        <a-col :span="20">
          <div style="background: white; width: 100%;">
            <a-tabs default-active-key="1">
              <a-tab-pane v-for="tab in tabs" :key="tab.key" :title="tab.title">
                <component :is="tab.component"></component>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>

import {onMounted, ref} from "vue";
import ZhangHaoXinXi from "../../components/user/ZhangHaoXinXi.vue";
import ShuaTiXinXi from "../../components/user/ShuaTiXinXi.vue";
import {useStore} from "vuex";

const userInfo = ref({});
const tabs = ref([
  {
    key: "1",
    title: "刷题信息",
    component: ShuaTiXinXi
  },
  {
    key: "2",
    title: "账号信息",
    component: ZhangHaoXinXi
  },
  {
    key: "3",
    title: "题解",
    component: ""
  },
  {
    key: "4",
    title: "喜欢",
    component: ""
  },
  {
    key: "5",
    title: "收藏",
    component: ""
  },
])
const store = useStore();

onMounted(async () => {
  userInfo.value = await store.dispatch("user/getLoginUser");
})
</script>

<style scoped>

</style>
